<template>
  <!-- 添加退货  -->
  <div class="contractInfo box">
    <el-card
      shadow="never"
      :header="titleMap[mode]"
      class="item-background"
      style="width: 100%"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="addForm"
        label-width="auto"
        label-position="right"
      >
        <!-- <el-form-item label="标题" prop="name" style="width: 100%">
          <el-input
            v-model="form.name"
            clearable
            placeholder="请输入标题"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="退款订单" request>
          <el-button type="primary" plain @click="selectProduceOrder">
            选择订单</el-button
          >
        </el-form-item>

        <el-form-item label="退款产品" prop="list" style="width: 100%">
          <sc-form-table
            ref="table"
            v-model="form.refundProducts"
            :hideAdd="true"
            placeholder="暂无数据"
          >
            <el-table-column
              label="产品名称"
              prop="name"
              min-width="100"
              fixed
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格型号"
              prop="specification"
              min-width="100"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="材质"
              prop="vproductMaterial"
              min-width="100"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="备注"
              prop="vproductRemark"
              min-width="100"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="可退款数量" width="200">
              <template #default="scope">
                {{ scope.row.deliverNum - scope.row.rejectedNum }}
              </template>
            </el-table-column>
            <el-table-column prop="refundNum" label="退款数量" width="250">
              <template #default="scope">
                <el-input-number
                  :precision="0"
                  v-model.number="scope.row.refundNum"
                  placeholder="请输入退款的数量"
                  @change="changeNum($event, scope.row)"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="单位" prop="unitName" width="200"></el-table-column>
          </sc-form-table>
        </el-form-item>

        <!-- <el-form-item label="待退款" prop="adminId" style="width: 100%">
          <el-table
            ref="table"
            :data="form.refundProduct"
            placeholder="暂无数据"
            stripe
            border
          >
            <el-table-column
              label="产品名称"
              prop="name"
              min-width="100"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格型号"
              prop="specification"
              min-width="100"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="材质"
              prop="vproductMaterial"
              min-width="100"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="备注"
              prop="vproductRemark"
              min-width="100"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="可退款数量"
              width="200"
            >
            <template #default="scope">
            {{scope.row.deliverNum-scope.row.rejectedNum}}
            </template>
            </el-table-column>
            <el-table-column prop="recededNum" label="退款数量" width="250">
              <template #default="scope">
                <el-input-number
                  :precision="0"
                  v-model.number="scope.row.recededNum"
                  placeholder="请输入退款的数量"
                  @change="changeNum($event, scope.row)"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              label="单位"
              prop="unitName"
              width="200"
            ></el-table-column>
          </el-table>
        </el-form-item> -->
        <el-form-item label="退款金额" prop="refundMoney" style="width: 100%">
          <el-input-number
            :precision="2"
            v-model.number="form.refundMoney"
            placeholder="请输入单价"
            @change="changePrice(scope.row)"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="退款原由" style="width: 100%">
          <el-input
            type="textarea"
            v-model="form.reason"
            rows="3"
            clearable
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 审核流程项 -->
      <check-form-item
        ref="checkFormItem"
        @setCheckConfig="setCheckConfig"
        :field="this.form"
        :checkType="checkType"
        v-show="$route.query.mode == 'add'"
      ></check-form-item>

      <div class="button">
        <el-button type="primary" @click="save" :loading="isSaveing">保 存</el-button>
        <el-button @click="cencel">取 消</el-button>
      </div>
    </el-card>

    <!-- 选择需要退货的生产单 -->
    <select-produce-order
      ref="selectProduceOrder"
      @setOrder="setOrder"
    ></select-produce-order>
  </div>
</template>
<script>
import selectProduceOrder from "../components/selectProduceOrder";
import checkFormItem from "@/components/checkProcess/checkFormItem.vue";
export default {
  name: "addPurchase",
  data() {
    return {
      checkType: 16, //工作流的类型
      mode: this.$route.query.mode,
      titleMap: {
        add: "添加",
        edit: "编辑",
      },
      isSaveing: false,
      attrObj: null,
      form: {
        refundAdminId: "",
        departmentId: "",
        contractId: "",
        produceId: "",
        refundMoney: 0,
        title: "",
        reason: "", //备注
        exempt: "", //是否免审
        refundProducts: null,
      },
      userInfo: {},
      rules: {
        refundMoney: [{ required: true, message: "请输入退款金额", trigger: "blur" }],
      },
    };
  },
  components: {
    selectProduceOrder,
    checkFormItem,
  },

  mounted() {
    this.userInfo = this.$TOOL.data.get("USER_INFO");
    this.form.refundAdminId = this.userInfo.userId;
    this.form.departmentId = this.userInfo.departmentId;
    if (this.$route.query.mode == "edit") this.getDetail();
  },
  methods: {
    // 审批流配置
    setCheckConfig(list, exempt) {
      this.form.workflowJsonList = list;
      this.form.exempt = exempt;
    },

    // 获取退货详情
    async getDetail() {
      let param = {
        id: this.$route.query.id,
      };
      let { data } = await this.$API.produce.returnProduct.getReturnProductById.get(
        param
      );
      this.form = data;
      this.productList = data.rejectedProductDTOS;
    },

    //选择需要退货的生产单
    selectProduceOrder() {
      this.$refs.selectProduceOrder.open();
    },

    setOrder(data) {
      this.form.title = data.contractName + "--退款单";
      let refundProducts = [];
      console.log(data);
      data.produceProducts.forEach((item, index) => {
        if (item.deliverNum - item.rejectedNum > 0) {
          item.id = null;
          item.productId = item.quotesProductId;
          item.refundNum = item.deliverNum - item.rejectedNum;
          refundProducts.push(item);
        }
      });
      this.form.refundProducts = refundProducts;
      // console.log(data.produceProducts)
      // this.refundProducts.map(item => {
      //   item.recededNum = 0
      // })
      this.form.contractId = data.contractId;
      this.form.produceId = data.id;
    },

    // 数量改变
    changeNum(currentValue, item) {
      if (item.refundNum > item.deliverNum - item.rejectedNum) {
        item.refundNum = item.deliverNum - item.rejectedNum;
        // this.$message.error(`【${item.name}】可退货数量不足，请重新填写退货数量`)
      }
    },

    // 添加
    save() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          if (this.form.refundProducts == 0) {
            this.$message.error("至少填写一种产品的退货数量");
            return;
          }
          this.isSaveing = true;
          let res = await this.$API.produce.refund.addRefund.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.closeSelectedTag(this.$route);
            this.$router.push({
              path: "/produce/refund",
            });
            this.$message.success("操作成功");
          }
        }
      });
    },

    cencel() {
      this.closeSelectedTag(this.$route);
      this.$router.push({
        path: "/goods/returnGoods",
      });
    },
    //关闭tag
    closeSelectedTag(tag) {
      this.$store.commit("removeViewTags", tag);
      this.$store.commit("removeIframeList", tag);
      this.$store.commit("removeKeepLive", tag.name);
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  margin: 10px;
}
.el-form {
  // width: 100%;
  padding: 30px;
  background: #fff;
}

.button {
  margin-top: 50px;
}

.pass {
  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #409eff !important;
  }

  :deep(.el-radio__input.is-checked) {
    .el-radio__inner {
      background: #409eff !important;
      border-color: #409eff !important;
    }
  }
}

.refuse {
  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #f56c6c !important;
  }

  :deep(.el-radio__input.is-checked) {
    .el-radio__inner {
      background: #f56c6c !important;
      border-color: #f56c6c !important;
    }
  }
}
</style>
